<template>
  <div
    :style="{ height: height + 'px', width: width + 'px' }"
    class="menu-wrapper"
  >
    <div class="menu-title">
      <div class="title-line"></div>
      <div 
        :title="title" 
        :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal','text-decoration': $attrs.underline ? 'underline' : 'none','text-align': `${$attrs.textAlign}`,'color': `${$attrs.fontColor}`,'line-height': `${$attrs.lineHeight}`}"  
        class="title-name"
      >{{title}}</div>
      <div class="title-more" @click="jumpToPage">更多</div>
    </div>
    <div class="menu-box" :style="{ background: backColor }">
      <div :style="{height:'100%',width:'100%'}"/>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getChartData } from "@/api/custom/portalDesigner";
import {getMenu} from '@/api/system/menu';
import {getHomePage} from '@/api/login'
require('echarts/theme/macarons') // echarts theme

export default {
  props: {
    width: {
      type: Number,
      default: '500'
    },
    height: {
      type: Number,
      default: '300'
    },
    title: {
      type: String,
      default: "饼状图",
    },
    backColor: {
      type: String,
      default: "#ffffff",
    },
    tableName: {
      type: String,
      dafault: "",
    },
    nameField: {
      type: String,
      dafault: "",
    },
    dataField: {
      type: String,
      dafault: "",
    },
    CNameField:{
      type:String,
      default:''
    },
    CDataField:{
      type:String,
      default:''
    },
    jumpTo: {
      type: Number,
      default: 0
    },
  },
  
  data() {
    return {
      nameData:[],
      showData:[]
    }
  },
  watch: {
    width(val){
      if (this.chart) {
        this.chart.resize({width:val,height:this.height-40})
      }
    },
    height(val) {
      if (this.chart) {
        this.chart.resize({width:this.width,height:val-40})
      }
    },
    nameField: {
      handler(val) {
        this.getAxisData(val);
      },
    },
    dataField: {
      handler(val) {
        this.getAxisData(val);
      },
    },
    nameData: {
      handler(val) {
        this.setChart();
      },
    },
    showData: {
      handler(val) {
        this.setChart();
      },
    },
  },
  mounted() {
    if(this.nameField){
      this.getAxisData(this.nameField);
    }
    if(this.dataField){
      this.getAxisData(this.dataField);
    }
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el.children[1], "macarons");
      this.chart.resize({width:this.width,height:this.height-40})
    },
    //界面跳转
    async jumpToPage() {
      const flag = this.$store.state.currentStep.clickFlag
      if(flag){
        let toUrl = ''
        await getHomePage().then(res => {
          toUrl= res.data.path
        }).catch(error => {
          console.log(error)
        })
        let urls = []
        let res = null
        while (true) {
          res = await getMenu(res ? res.data.parentId : this.jumpTo)
          if (res.code === 0) {
            if (res.data) {
              urls.push(res.data.path)
              if (res.data.parentId === 0) {
                break
              }
            } else {
              break
            }
          }
        }
        if (urls.length > 0) {
          toUrl = urls.reverse().join('/')
        }
        this.$router.push(toUrl)
      }
    },
    //获取名称值/显示值的数据
    getAxisData(value) {
      if (!value) {
        this.nameData =[]
        this.showData=[]
      } else {
        let params = {
          tableName: this.tableName,
          fieldNameX: this.nameField,
          fieldNameY:this.dataField
        };
        if(this.tableName&&this.nameField&&this.dataField){
          getChartData(params)
            .then((res) => {
              if (res.code === 0) {               
                  this.nameData = res.data.X
                  this.showData = res.data.Y
              }
            })
            .catch((e) => console.log(e));
        }
        
      }
    },
    setChart(){
      let Data = this.showData.map((item,index)=>{
        return(
          {value:item,name:this.nameData[index]}
        )
      })
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/>{a} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data:this.nameData
        },
        series: [
          {
            name: this.CDataField,
            type: 'pie',
            radius: '48%',
            center: ['50%', '40%'],
            data:Data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-wrapper {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  .menu-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .title-line {
      margin: 0 10px;
      width: 5px;
      height: 20px;
      background: #409eff;
    }
    .title-name {
      width:calc(100% - 50px);
      padding-right:2% ;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .title-more {
      width: 45px;
      float: right;
      right: 0px;
      color: #409eff;
    }
  }

  .menu-box {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>